<!-- INCLUDE overall_header.html -->

<script>
	/**
	* Change language
	*/
	function change_language(lang_iso)
	{
		document.cookie = '{COOKIE_NAME}_lang=' + lang_iso + '; path={COOKIE_PATH}';
		document.forms['register'].change_lang.value = lang_iso;
		document.forms['register'].submit.click();
	}
</script>

{% if PROVIDER_TEMPLATE_FILE %}
	<div class="panel">
		<div class="inner">

			<h2>{{ SITENAME }} - {{ lang('OAUTH_REGISTRATION') }}</h2>

			{% include PROVIDER_TEMPLATE_FILE %}
		</div>
	</div>
{% endif %}

<form id="register" method="post" action="{S_UCP_ACTION}"{S_FORM_ENCTYPE}>

<div class="panel">
	<div class="inner">

	<h2>{SITENAME} - {L_REGISTRATION}</h2>

	<fieldset class="fields2">
	<!-- IF ERROR --><dl><dd class="error">{ERROR}</dd></dl><!-- ENDIF -->
	<!-- IF L_REG_COND -->
		<dl><dd><strong>{L_REG_COND}</strong></dd></dl>
	<!-- ENDIF -->
	<!-- EVENT ucp_register_credentials_before -->
	<dl>
		<dt><label for="username">{L_USERNAME}{L_COLON}</label><br /><span>{L_USERNAME_EXPLAIN}</span></dt>
		<dd><input type="text" tabindex="1" name="username" id="username" size="25" value="{USERNAME}" class="inputbox autowidth" title="{L_USERNAME}" autocomplete="off" /></dd>
	</dl>
	<dl>
		<dt><label for="new_password">{L_PASSWORD}{L_COLON}</label><br /><span>{L_PASSWORD_EXPLAIN}</span></dt>
		<dd><input type="password" tabindex="2" name="new_password" id="new_password" size="25" value="{PASSWORD}" class="inputbox autowidth" title="{L_NEW_PASSWORD}" autocomplete="off" /></dd>
	</dl>
	<dl>
		<dt><label for="password_confirm">{L_CONFIRM_PASSWORD}{L_COLON}</label></dt>
		<dd><input type="password"  tabindex="3" name="password_confirm" id="password_confirm" size="25" value="{PASSWORD_CONFIRM}" class="inputbox autowidth" title="{L_CONFIRM_PASSWORD}" autocomplete="off" /></dd>
	</dl>
		<dl>
			<dt><label for="email">{L_EMAIL_ADDRESS}{L_COLON}</label></dt>
			<dd><input type="email" tabindex="4" name="email" id="email" size="25" maxlength="100" value="{EMAIL}" class="inputbox autowidth" title="{L_EMAIL_ADDRESS}" autocomplete="off" /></dd>
		</dl>

	<!-- EVENT ucp_register_credentials_after -->
	<hr />

	<!-- EVENT ucp_register_options_before -->
	{% if LANG_OPTIONS %}
	<dl>
		<dt><label for="{{ LANG_OPTIONS.id }}">{{ lang('LANGUAGE') ~ lang('COLON') }}</label></dt>
		<dd>
			{{ FormsSelect(LANG_OPTIONS) }}
		</dd>
	</dl>
	<script>
		/**
		 * Change language on change
		 */
		document.querySelector("{{ '#' ~ LANG_OPTIONS.id }}").addEventListener('change', (event) => {
			change_language(event.target.value);
			return false;
		});
	</script>
	{% endif %}

	<!-- INCLUDE timezone_option.html -->

	<!-- EVENT ucp_register_profile_fields_before -->
	{% if PROFILE_FIELDS_REQUIRED %}<dl><dd><strong>{L_ITEMS_REQUIRED}</strong></dd></dl>{% endif %}

	<!-- BEGIN profile_fields -->
		<dl>
			<dt><label<!-- IF profile_fields.FIELD_ID --> for="{profile_fields.FIELD_ID}"<!-- ENDIF -->>{profile_fields.LANG_NAME}{L_COLON}<!-- IF profile_fields.S_REQUIRED --> *<!-- ENDIF --></label>
			<!-- IF profile_fields.LANG_EXPLAIN --><br /><span>{profile_fields.LANG_EXPLAIN}</span><!-- ENDIF -->
			<!-- IF profile_fields.ERROR --><br /><span class="error">{profile_fields.ERROR}</span><!-- ENDIF --></dt>
			<dd>{profile_fields.FIELD}</dd>
		</dl>
	<!-- END profile_fields -->

	<!-- EVENT ucp_register_profile_fields_after -->
	</fieldset>
	</div>
</div>
<!-- IF CAPTCHA_TEMPLATE -->
	<!-- DEFINE $CAPTCHA_TAB_INDEX = 8 -->
	<!-- INCLUDE {CAPTCHA_TEMPLATE} -->
<!-- ENDIF -->

<!-- IF S_COPPA -->
<div class="panel">
	<div class="inner">

	<h4>{L_COPPA_COMPLIANCE}</h4>

	<p>{L_COPPA_EXPLAIN}</p>
	</div>
</div>
<!-- ENDIF -->

<!-- EVENT ucp_register_buttons_before -->

<div class="panel">
	<div class="inner">

	<fieldset class="submit-buttons">
		{S_HIDDEN_FIELDS}
		<input type="submit" tabindex="9" name="submit" id="submit" value="{L_SUBMIT}" class="button1 button button-form default-submit-action" />
		{S_FORM_TOKEN}
	</fieldset>

	</div>
</div>
</form>

<!-- INCLUDE overall_footer.html -->
